@extends('Layout/base')
@section('header-js')

	<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/home.css') }}">
	<!-- <script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script> -->
	<!-- <script type="text/javascript" src="{{ asset('js/index.js') }}"></script> -->
	<script type="text/javascript" src="{{ asset('js/js-tab.js') }}"></script>
<style>

.stop{
		background:#ccc;
}

</style>
@endsection


@section('content')

    <div class="yHeader">
        <div class="yNavIndex">
            <div class="pullDown">
                <h2 class="pullDownTitle">全部商品分类</h2>
            </div>
            <ul class="yMenuIndex">
                <li><a href="" target="_blank">限时抢购</a></li>
								@if (!empty($types))
									@foreach ($types as $typeval)
		                <li><a href="{{ route('Home.goodsList', ['id' => $typeval['id'] ])}}" target="_blank">{{ $typeval['type_name'] }}</a></li>
									@endforeach
								@endif
            </ul>
        </div>
    </div>
</header>
<!-- header End -->
<!-- 商品详情 begin -->
<section>
    <div class="pc-details" >
        <div class="containers">
					<div class="pc-nav-item"><a class="pc-title" href="#">
						<!-- 促销商品 -->
						@if($type == 'promate')
								{{ $goods['goods_name'] }}
						<!-- 热销商品 -->
						@elseif ($type === 'hotgoods')
								{{ $goods['goods_name'] }}
						<!-- 普通商品	 -->
						@elseif ($type == 'generalgoods')
								{{ $goods->goods_name }}
						@endif
					</a></div>
            <div class="pc-details-l">
                <div class="pc-product clearfix">
                    <div class="pc-product-h">
											<!-- 促销商品图片 -->
											@if($type == 'promate')
													@php $result = count($pic) @endphp
													@if (!empty($pic))
														@if ($result < 1)
			                        <div class="pc-product-top">
																<img src="http://oydt3ttm3.bkt.clouddn.com/{{ $pic['0'] }}" id="big_img" width="418" height="418">
															</div>
														@else
															<div class="pc-product-top">
																<img src="http://oydt3ttm3.bkt.clouddn.com/{{ $pic['0'] }}" id="big_img" width="418" height="418">
															</div>
														@endif
													@else
																<img src="" id="big_img" width="418" height="418"></div>
													@endif

											<!-- 热销商品 -->
											@elseif ($type === 'hotgoods')
													@php $result = count($pic) @endphp
													@if (!empty($pic))
														@if ($result < 1)
															<div class="pc-product-top">
																<img src="http://oydt3ttm3.bkt.clouddn.com/{{ $pic['0'] }}" id="big_img" width="418" height="418">
															</div>
														@else
															<div class="pc-product-top">
																<img src="http://oydt3ttm3.bkt.clouddn.com/{{ $pic['0'] }}" id="big_img" width="418" height="418">
															</div>
														@endif
													@else
																<img src="" id="big_img" width="418" height="418"></div>
													@endif

											<!-- 普通商品 -->
											@elseif ($type == 'generalgoods')
													@php $result = count($pic) @endphp
													@if (!empty($pic))
														@if ($result < 1)
															<div class="pc-product-top">
																<img src="http://oydt3ttm3.bkt.clouddn.com/{{ $pic['0'] }}" id="big_img" width="418" height="418">
															</div>
														@else
															<div class="pc-product-top">
																<img src="http://oydt3ttm3.bkt.clouddn.com/{{ $pic['0'] }}" id="big_img" width="418" height="418">
															</div>
														@endif
													@else
																<img src="" id="big_img" width="418" height="418"></div>
													@endif

											@endif
											<!-- 结束判断 -->

                        <div class="pc-product-bop clearfix" id="pro_detail">
                            <ul>

														<!-- 判断促销 -->
														@if($type == 'promate')
																@if (!empty($pic))
																	@foreach ($pic as $picval)
		                                <li><a href="javascript:void(0);" simg="http://oydt3ttm3.bkt.clouddn.com/{{ $picval }}"><img src="http://oydt3ttm3.bkt.clouddn.com/{{ $picval }}" width="58" height="58"></a> </li>
																	@endforeach
																@else
																	  <li><a href="javascript:void(0);" simg=""><img src="" width="58" height="58"></a> </li>
																@endif
														<!-- 判断热销 -->
														@elseif ($type === 'hotgoods')
																@if (!empty($pic))
																	@foreach ($pic as $picval)
																		<li><a href="javascript:void(0);" simg="http://oydt3ttm3.bkt.clouddn.com/{{ $picval }}"><img src="http://oydt3ttm3.bkt.clouddn.com/{{ $picval }}" width="58" height="58"></a> </li>
																	@endforeach
																@else
																		<li><a href="javascript:void(0);" simg=""><img src="" width="58" height="58"></a> </li>
																@endif

														<!-- 普通商品 -->
														@elseif ($type == 'generalgoods')
																@if (!empty($pic))
																	@foreach ($pic as $picval)
																	@php @endphp
																		<li><a href="javascript:void(0);" simg="http://oydt3ttm3.bkt.clouddn.com/{{ $picval }}"><img src="http://oydt3ttm3.bkt.clouddn.com/{{ $picval }}" width="58" height="58"></a> </li>
																	@endforeach
																@else
																		<li><a href="javascript:void(0);" simg=""><img src="" width="58" height="58"></a> </li>
																@endif
														@endif

                            </ul>
                        </div>
                    </div>
                    <div class="pc-product-t">
											<!-- 促销商品 -->
											@if($type == 'promate')
		                        <div class="pc-name-info" style="margin-top:30px;">
																<h1>{{ isset($goodscontent['goods_desc']) ? $goodscontent['goods_desc'] : $goods['goods_name'] }}</h1>
		                            <p class="clearfix pc-rate"><div style="width:600px;height:50px;"><strong>${{ $goods['promate_price'] }}<i> </i><i style="text-decoration: line-through;font-size:13px;color:#ccb;">${{ $goods['price'] }}</i></strong></div><span><em>限时抢购</em>将于<b class="reds">{{ $goods['end_time'] }}</b>后结束</span></p>
		                        </div>
											<!-- 热销商品 -->
											@elseif ($type === 'hotgoods')
													<div class="pc-name-info" style="margin-top:30px;">
															<h1>{{ isset($goodscontent['goods_desc']) ? $goodscontent['goods_desc'] : $goods['goods_name'] }}</h1>
															<p class="clearfix pc-rate"><strong>{{ $goods['price'] }}</strong> <span><em>疯狂热销</em><b class="reds">{{ $goods['goods_name'] }}</b></span></p>
													</div>
											<!-- 普通商品	 -->
											@elseif ($type == 'generalgoods')
													<div class="pc-name-info" style="margin-top:30px;">
														<h1>{{ isset($goodscontent['goods_desc']) ? $goodscontent['goods_desc'] : $goods->goods_name }}</h1>
															<p class="clearfix pc-rate"><strong>{{ $goods->price }}</strong> <span><em>精品推荐</em><b class="reds">{{ $goods->goods_name }}</b></span></p>
													</div>
											@endif
                        <div class="pc-size">
													<div class="pc-telling clearfix">
															<div class="pc-version">颜色分类</div>
															<div class="pc-adults">
																	<ul id='colors'>
																		<!-- 普通商品 -->
																		@if ($type == 'generalgoods')
																				@foreach ($color as $colorval)
																						<li><a href="javascript:void(0);" onclick="selectedcolor(this, {{ $goods->id }})">{{ $colorval['color'] }}</a> </li>
																				@endforeach
																		<!-- 促销商品 -->
																		@elseif ($type == 'promate')
																				@foreach ($color as $colorval)
																						<li><a href="javascript:void(0);" onclick="selectedcolor(this, {{ $goods['goods_id'] }})">{{ $colorval }}</a> </li>
																				@endforeach
																		<!-- 热销商品 -->
																		@elseif ($type == 'hotgoods')
																				@foreach ($color as $colorval)
																						<li><a href="javascript:void(0);" onclick="selectedcolor(this, {{ $goods['id'] }})">{{ $colorval }}</a> </li>
																				@endforeach
																		@endif
																	</ul>
															</div>
													</div>
                            <div class="pc-telling clearfix">
                                <div class="pc-version">尺寸</div>
                                <div class="pc-adults">
                                    <ul id='sizes'>
																			<!-- 普通商品 -->
																			@if ($type == 'generalgoods')
																					@foreach ($size as $sizeval)
																							<li><a class="size" href="javascript:void(0);" onclick="selectedsize(this, {{ $goods->id }})">{{ $sizeval['size'] }}</a> </li>
																					@endforeach
																			<!-- 促销商品 -->
																			@elseif ($type == 'promate')
																					@foreach ($size as $sizeval)
																							<li><a class="size" href="javascript:void(0);" onclick="selectedsize(this, {{ $goods['goods_id'] }})">{{ $sizeval }}</a> </li>
																					@endforeach
																			<!-- 热销商品 -->
																			@elseif ($type == 'hotgoods')
																					@foreach ($size as $sizeval)
																							<li><a class="size" href="javascript:void(0);" onclick="selectedsize(this, {{ $goods['id'] }})">{{ $sizeval }}</a> </li>
																					@endforeach
																			@endif
                                    </ul>
                                </div>
                            </div>
                            <div class="pc-telling clearfix">
                                <div class="pc-version">数量</div>
                                <div class="pc-adults clearfix">
                                    <div class="pc-adults-p clearfix fl">
                                        <input type="text" name='number' disabled id="number" oninput="numbersize(this)" style="width:60px;"/>
                                    </div>
                                    <div class="fl pc-letter "></div>
                                    <div class="fl pc-stock " id="reserve">库存 <i id="reservenumber"></i> 件</div>
                                </div>
																@if ($type == 'promate')
																<h4>限购一件</h4>
																@endif
                            </div>
                        </div>
                        <div class="pc-emption">
														<h3 id="error" style="color:red;"></h3>
														<!-- 普通商品 -->
														@if ($type == 'generalgoods')
																<a href="javascript:void(0);" class="join" onclick="addtocar(this, {{ $goods->id }})">加入购物车</a>
														<!-- 促销商品 -->
														@elseif ($type == 'promate')
																<a href="javascript:void(0);" style="background:#E6433E;color:#FFFFFF;" onclick="addtocar(this, {{ $goods['goods_id'] }})">立即抢购</a>
														<!-- 热销商品 -->
														@elseif ($type == 'hotgoods')
																<a href="javascript:void(0);" class="join" onclick="addtocar(this, {{ $goods['id'] }})">加入购物车</a>
														@endif
														<h3 id="number-error" style="color:red;"></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
		<br><br>
    <div class="containers clearfix" style="margin-top:20px;">
        <div class="fl">
            <div class="menu_list" id="firstpane">
                <h2>商城分类</h2>
								@if (!empty($types))
										@foreach ($types as $typeval)
										@if (isset($typeval['type_name']))
			                <h3 class="menu_head current">{{ $typeval['type_name'] }}</h3>
			                <div class="menu_body" style="display: none;">
												@if (!empty($typeval['sons']))
													@foreach ($typeval['sons'] as $typeson)
			                    	<a href="{{ route('Home.goodsList', ['id' => $typeson['id']])}}">{{ $typeson['type_name'] }}</a>
													@endforeach
												@else
													<a href="#">暂无数据</a>
												@endif
			                </div>
										@else
											<h3 class="menu_head current">暂无数据</h3>
											<div class="menu_body" style="display: none;">
													<a href="#">暂无数据</a>
											</div>
										@endif
										@endforeach
								@else
										<h3 class="menu_head current">暂无书库</h3>
										<div class="menu_body" style="display: none;">
												<a href="#">暂无数据</a>
										</div>
								@endif
            </div>
        </div>
        <div class="pc-info fr">
            <div class="pc-overall">
                <ul id="H-table1" class="brand-tab H-table1 H-table-shop clearfix ">
                    <li class="cur"><a href="javascript:void(0);">商品介绍</a></li>
                </ul>
                <div class="pc-term clearfix">
									<!-- 广告区域开始 -->
                   <div class="H-over1 pc-text-word clearfix" id="pics">
										 		@php $res = JSON_decode($content->goods_content) @endphp
												{!! $res !!}
                   </div>
									 <!-- 广告区域结束 -->
                   <div class="H-over1 pc-text-title" style="display:none">

                       <div class="pc-line"></div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 商品详情 End -->

@endsection


@section('foot-js')

<script>
$("#pro_detail a").first().addClass("cur");
$(function(){
   $(".yScrollListInList1 ul").css({width:$(".yScrollListInList1 ul li").length*(160+84)+"px"});
   $(".yScrollListInList2 ul").css({width:$(".yScrollListInList2 ul li").length*(160+84)+"px"});
   var numwidth=(160+84)*4;
   $(".yScrollListInList .yScrollListbtnl").click(function(){
       var obj=$(this).parent(".yScrollListInList").find("ul");
       if (!(obj.is(":animated"))) {
           var lefts=parseInt(obj.css("left").slice(0,-4));
           if(lefts<60){
               obj.animate({left:lefts+numwidth},1000);
           }
       }
   })
   $(".yScrollListInList .yScrollListbtnr").click(function(){
       var obj=$(this).parent(".yScrollListInList").find("ul");
       var objcds=-(60+(Math.ceil(obj.find("li").length/4)-4)*numwidth);
       if (!(obj.is(":animated"))) {
           var lefts=parseInt(obj.css("left").slice(0,-4));
           if(lefts>objcds){
               obj.animate({left:lefts-numwidth},1000);
           }
       }
   })
})

$(function(){
	  $("#pro_detail a").click(function(){
	      $("#pro_detail a").removeClass("cur");
	      $(this).addClass("cur");
	      $("#big_img").attr("src",$(this).attr("simg"));
	  });

	  $(".attrdiv a").click(function(){
	      $(".attrdiv a").removeClass("cur");
	      $(this).addClass("cur");
	  });

	  $('.amount2').click(function(){
	      var num_input = $("#subnum");
	      var buy_num = (num_input.val()-1)>0?(num_input.val()-1):1;
	      num_input.val(buy_num);
	  });

	  $('.amount1').click(function(){
	      var num_input = $("#subnum");
	      var buy_num = Number(num_input.val())+1;
	      num_input.val(buy_num);
	  });

	   $("#H-table li").each(function(i){
	       $(this).click((function(k){
	           var _index = k;
	           return function(){
	               $(this).addClass("cur").siblings().removeClass("cur");
	               $(".H-over").hide();
	               $(".H-over:eq(" + _index + ")").show();
	           }
	       })(i));
	   });
	   $("#H-table1 li").each(function(i){
	       $(this).click((function(k){
	           var _index = k;
	           return function(){
	               $(this).addClass("cur").siblings().removeClass("cur");
	               $(".H-over1").hide();
	               $(".H-over1:eq(" + _index + ")").show();
	           }
	       })(i));
	   });
	});
(function(a){
   a.fn.hoverClass=function(b){
       var a=this;
       a.each(function(c){
           a.eq(c).hover(function(){
               $(this).addClass(b)
           },function(){
               $(this).removeClass(b)
           })
       });
       return a
   };
})(jQuery);

$(function(){
   $("#pc-nav").hoverClass("current");
});
$(document).ready(function(){

   $("#firstpane h3.menu_head").click(function(){
       $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       $(this).siblings().removeClass("current");
   });

   $("#secondpane .menu_body:eq(0)").show();
   $("#secondpane h3.menu_head").mouseover(function(){
       $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
       $(this).siblings().removeClass("current");
   });

});




/****************************************************js开始*********************************************************/
color = '';
var number = 1;

// 颜色选择
function selectedcolor(tag, id) {

		$('#number').val('');

		$('#subnum').attr('disabled', true);

		$(tag).addClass('cur').parent().siblings().children().removeClass('cur');

		var size = $('.size').parent().siblings().children().removeClass('cur');

	 $('.size').parent().removeClass('stop');

		color = $(tag).html();

		var sizes = [];
		for (var i = 0; i < size.length; i++) {
				sizes[i] = $(size[i]).html();
				sizes[i+1] = $('.size').html();
		}

		$.post("{{ route('goods.showsize') }}?id=" + id + "&color=" + color + "&_token={{ csrf_token() }}", function(data) {
				colorsize = [];
				for (var i = 0; i < data.length; i++) {
						colorsize[i] = data[i].size;
				}
				console.log(colorsize);

				$.post("{{ route('goods.poorset') }}?sizes=" + sizes + "&colorsize=" + colorsize + "&_token={{ csrf_token() }}", function(data) {
						for (var i = 0; i < size.length; i++) {

								for (var j = 0; j < data.length; j++) {
									console.log($(size[i]).html());
										if ($(size[i]).html() == data[j]) {
												$(size[i]).parent().addClass('stop');
										} else if (data[j] == 33){
												$('.size').parent().addClass('stop');
										}
								}
						}
				},'json');
		},'json');
}


// 尺寸选择
function selectedsize(size, id) {

	if (color ==  '') {
			return false;
	}

	for (var j = 0; j < colorsize.length; j++) {
			if ($(size).html() == colorsize[j]) {

					$(size).addClass('cur').parent().siblings().children().removeClass('cur');

					var sizeinfo = $(size).html();

					$.post("{{ route('goods.goodsreserve') }}?sizeinfo=" + sizeinfo + "&color=" + color + "&goods_id=" + id + "&_token={{ csrf_token() }}", function(data) {
							$('#number').removeAttr('disabled');
							$('#number').val('1');
							reserve = data.reserve;
							$('#reservenumber').html(data.reserve);
					},'json');
			}
	}
}




@if ($type == 'promate')

		// 判断商品数量
		function numbersize(inputnumber) {
				console.log(1);
				$('#number-error').html('');

				enternumber = $(inputnumber).val();

				console.log(2);
				if (isNaN(enternumber)) {
						$(inputnumber).val('1');
						$('#number-error').html('请输入正确的数字');
				}

				if (enternumber > '1') {
						$(inputnumber).val('1');
						$('#number-error').html('促销商品限购一件');
				}
		}

@else

		function numbersize(inputnumber) {

				$('#number-error').html('');

				var reserve = $('#reservenumber').html();

				var enternumber = $(inputnumber).val();

				if (isNaN(enternumber)) {
						$(inputnumber).val('1');
						$('#number-error').html('请输入正确的数字');
				}

				if (enternumber < '1') {
						$(inputnumber).val('');
				}

				if (enternumber * 10 > reserve * 10) {
						$(inputnumber).val('1');
						$('#number-error').html('宝贝没有那么多哦，请重新选择');
						return false;
				}
		}

@endif

// 添加购物车
function addtocar(car, id, evn) {

		evn = evn || window.event;

		var carcolor = $('#colors').children().find('.cur').html();
		var carsize = $('#sizes').children().find('.cur').html();

		$('#number-error').html('');
		var enternumber = $('#number').val();

		if (carcolor == undefined) {
				$('#error').html('请选择商品类型');
				evn.preventDefault();
				return false;
		}

		if (carsize == undefined) {
				$('#error').html('请选择商品类型');
				evn.preventDefault();
				return false;
		}

		if (isNaN(enternumber)) {
				$('#number').val('1');
				$('#number-error').html('请输入正确的数字');
				return false;
		}

		if (isNaN(enternumber)) {
				$('#number').val('1');
				$('#number-error').html('请输入正确的数字');
		}

		if (enternumber * 10 > reserve * 10) {
				$('#number').val('1');
				$('#number-error').html('宝贝没有那么多哦，请重新选择');
				return false;
		}

		$.post("{{ route('goods.goodsinfo') }}?sizeinfo=" + carsize + "&color=" + carcolor + "&goods_id=" + id + "&_token={{ csrf_token() }}", function(data) {

				@if ($type == 'promate')
					attr_id = data.id;
					$.post("{{ route('confirmsale') }}?attr_id=" + data.id + "&number=" + enternumber + "&_token={{ csrf_token() }}", function(data) {
							if (data.status == 200) {
									location.href = '/Home/saleorder?attr_id='+attr_id;
							}  else if (data.status == 403) {
									alert(data.msg);
							} else if (data.status == 100) {
								 alert(data.msg);
								 location.href = '/Home/login';
							} else if (data.status == 345) {
								 alert(data.msg);
								 location.href = '/Home/user/address';
							}


					},'json');
				@else
					$.post("{{ route('addtocar') }}?attr_id=" + data.id + "&number=" + enternumber + "&_token={{ csrf_token() }}", function(data) {

							if (data.status == 201) {
									alert('成功加入购物车');
							} else if (data.status == 202) {
									alert('成功加入购物车');
							} else if (data.status == 403) {
									alert('没货了，走开');
							} else if (data.status == 500) {
									alert('真没货了，别玩了');
							}

						},'json');
				@endif

		},'json');
}

//懒加载
//监听窗口滚动条
$(window).on('scroll', function() {

		//获取滚动条的高度
		var scrollHeigth = $(document).scrollTop();

		//获取窗口的高度
		var windowHeight = $(window).height();

		//获取当前div距离文档顶部的高度
		var divHeight = $('#pics').offset().top;

		var id = @if ($type === 'promate')
									{{ $goods['goods_id'] }}
						 @elseif ($type === 'hotgoods')
						 			{{ $goods['id'] }}
						 @elseif ($type === 'generalgoods')
						 			{{ $goods->id }}
						 @endif

		if ((scrollHeigth + windowHeight - 130) > divHeight) {
				console.log(id);
				if (number == 1) {
					number++;
					$.get("{{ route('goods.pics') }}?id=" + id, function(data) {

							console.log(data);

						},'json');
				}
		}

});


</script>
@endsection
